<template>
  <div class="wrapper">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="item in swiper" :key="item.id">
        <img
          class="swiper-image"
          :src="item.imgUrl"
          @click="toSwiperdetail(item)"
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 前后翻页按钮 -->
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'lunbo',
  props: ['swiper'],
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 5000
        // 翻页导航按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // }
      },
    }
  },
  methods: {
    toSwiperdetail (info) {
      if(info.content){
        window.open(info.content)
      }
    }
  },
}
</script>

<style scoped lang="less">
.wrapper {
  // margin-top: 4.375rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-image {
  width: 100%;
  height: 32.5rem;
  vertical-align: middle;
  cursor: pointer;
}
/deep/.swiper-pagination-bullet-active {
  background-color: #ff5e4e;
}
</style>
